import React, { PureComponent } from 'react';

// Header
function Header() {
  console.log('Header render')
  return <h2>Header</h2>
}

// Main
class Banner extends PureComponent {
  render() {
    console.log('Banner render')
    return <h3>Banner</h3>
  }
}

function ProductList() {
  console.log('ProductList render')
  return (
    <ul>
      <li>ProductList1</li>
      <li>ProductList2</li>
      <li>ProductList3</li>
      <li>ProductList4</li>
      <li>ProductList5</li>
    </ul>
  )
}

class Main extends PureComponent {
  render() {
    console.log('Main render')
    return (
      <div>
        <Banner />
        <ProductList />
      </div>
    )
  }
}

// Footer
function Footer() {
  console.log('Footer render')
  return <h2>Footer</h2>
}

export default class App extends PureComponent  {
  constructor(props) {
    super(props)

    this.state = {
      counter: 0
    }
  }

  render() {
    console.log('App render')
    return (
      <div>
        <h2>current count: {this.state.counter}</h2>
        <button onClick={ e => this.incrment() }>+1</button>
        <button onClick={ e => this.decrment() }>-1</button>
        <Header />
        <Main />
        <Footer />
      </div>
    )
  }

  incrment() {
    this.setState({
      counter: this.state.counter + 1
    })
  }

  decrment() {
    this.setState({
      counter: this.state.counter - 1
    })
  }
}